<template>
  <div class="login-container">
    <div class="left" />
    <div class="right">
      <div class="box">
        <h3>登录</h3>
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" @validate="validateFn">
          <el-form-item label="用户名：" prop="mobile">
            <el-input v-model="ruleForm.mobile" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="ruleForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('aa', 'bbb', $event)">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import axios from '@/utils/request'
// import { sysLoginRequest } from '@/api/user'

export default {
  name: '',
  data() {
    var validateIsArray = (rule, value, callback) => {
      // if (!value) {
      //   callback(new Error('请勾选用户协议'))
      // } else {
      //   callback()
      // }
      // 下面代码： 先保证代码成功，最后再去玩技巧，优化代码
      value ? callback() : callback(new Error('请勾选用户协议'))
    }
    return {
      ruleForm: {
        // 这里面的属性，起什么名称：去接口文档里面看（后端要什么参数，我们前端就起什么名称）
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: '123456',
        isAgree: false
      },
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          // 给手机号写正则校验？ 百度  去element-ui官网去看
          // 发现element-ui 官网里面，没有pattern这个单词， 只能去网上百度 看别人的写法
          // 手机号校验的正则又不会写，又去百度正则表达式
          { pattern: /^1[3|5|6|7|8|9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 密码规则： 只能输入 6-20位， 不需要写正则校验，内置有 min max两个字段
          { min: 6, max: 20, message: '密码位数在6-20位', trigger: 'blur' }
        ],
        isAgree: [
          // { required: true, message: '必须同意该协议', trigger: 'change' }
          // { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          { 'validator': validateIsArray, 'trigger': 'change' }
        ]
      }
    }
  },
  methods: {
    validateFn() {
      // console.log(123)
    },
    submitForm(event, b, c) {
      // const obj = { age: 23}
      // obj.age   obj['age']
      // 怎么去看官网
      // Form Methods 是通过ref获取form组件实例对象，然后点出来的方法
      // console.log(this.$refs.ruleForm)
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          // console.log('所有校验通过')
          // 后台就是在这个里面 发登录请求
          // 第一步去官网看 axios发请求代码，找一个post请求的模板过来
          // 第二步去看接口文档，找登录接口， （去问后端）
          // 第三部，看接口文档的 出参(接口的返回值)和入参（接口需要的参数）
          // axios.post('https://heimahr.itheima.net/api/sys/login', {
          // 因为代码里面，有很多个请求，大项目里面可能有几百个请求，那么所有请求都要想下面这样写
          // 就会显得很臃肿，代码不好管理---- 所以现在要第二次封装，将所有请求 放在api文件夹里面去，
          // 根据不同的业务，起不同的文件名称
          // axios.post('/sys/login', {
          //   mobile: this.ruleForm.mobile,
          //   password: this.ruleForm.password
          // }).then(function(response) {
          //   console.log('5 登录成功的打印结果： ', response)
          // }).catch(function(error) {
          //   console.log('6: 请求失败：', error)
          // })
          // sysLoginRequest({
          //   mobile: this.ruleForm.mobile,
          //   password: this.ruleForm.password
          // }).then(res => {
          //   console.log('封装的请求成=成功：', res)
          // })
          // promise 的出现是为了解决 回调地狱的问题
          // es7 里面 又出现了一种语法， async + await 的方式，简化异步代码的书写
          // 将异步代码当做同步的方式去书写，本质上还是异步
          try {
            // const res = await sysLoginRequest({ mobile: this.ruleForm.mobile, password: this.ruleForm.password })
            // console.log('封装的请求成=成功：', res.data)
            // 调用vuex里面的actions 把token储存起来
            // 第二个参数，就是传递给actions的载荷， 在actions里面接收
            this.$store.dispatch('user/loginAction', {
              mobile: this.ruleForm.mobile,
              password: this.ruleForm.password }
            )
            // 能不能再这里写登录成功以后的跳转--- 不能写
            // router.push('/')
          } catch (err) {
            //
          }
        } else {
          console.log('有某一个校验失败')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  // background-color: lightsalmon;
  // 百分比会有继承的概念，父元素100%，这里才有效果
  // height: 100%;
  height: 100vh; // 视口新单位 vw vh 屏幕的整个宽度是 100vw, 1vw就是1%的意思
  width: 100%;
  display: flex;
  // 默认flex布局的主轴方向;
  flex-direction: row;
  .left {
    // background: lightgreen;
    // 第一个1 有剩余空间是否扩大  flex-grow
    // 第二个1，空间不够是否自动缩小 flex-shrink
    // 第三个值， flex基准宽度（高度）
    // flex: 1 1 0%
    flex: 3; // 3 1 0%
    // 1. 如果在css里面 用了@符号，必须在@前面加个 ~，告诉浏览器，去查找编译之后的图片地址
    // background-image: url('~@/assets/common/login_back.png');
    // 2. 如果使用相对路径，不使用@符号
    background-image: url('../../assets/common/login_back.png');
    background-size: cover;
    background-repeat: no-repeat;
    // background-position: 50%;将图片向右侧移动50%
  }
  .right {
    // background-color: lightblue;
    flex: 2;
    // 你怎么杨实现一个 块级元素的  水平垂直居中？
    display: flex;
    justify-content: center;
    align-items: center;
    .box {
      // width: 100px;
      // height: 100px;
      // background: lightcyan;
      // el-input这个组件是element-ui的，渲染到浏览器之后，没有这个标签了
      // 但是会有一个类名叫 el-input
      .el-input {
        width: 300px;
      }
      h3 {
        margin-left: 25px;
      }
    }
  }
}
</style>
